<template>
	<view class="Details">
		<nav-bars ref="navBar" :scrollTop="scrollTop" :transparentFixedFontColor="scrollTop > 400 ? '#333' : '#fff'" type="transparentFixed" title="团队管理"></nav-bars>
		<view class="BgHead">
			<image class="BgImg" :src="`${ImgUrl}/static/superHK/topBg.png`" mode=""></image>
			<view class="flex align-center">
				<view class="topBox flex align-center justify-between">
					<view class="left flex align-center">
						<image :src="`${ImgUrl}/static/superHK/team/user.png`" mode=""></image>
						{{count}}人
					</view>
					<view class="num flex align-center" @click="toAudit">
						<image :src="`${ImgUrl}/static/superHK/team/reviewed.png`" mode=""></image>
						待审核
					</view>
				</view>
			</view>
		</view>

		<view class="Order">
			<view class="topNav flex justify-between align-center">
				<view class="item" :class="{ active: collectType == 1 }" @click="selectCollect(1)">状态正常</view>
				<!-- <view class="line"></view> -->
				<view class="item" :class="{ active: collectType == 2 }" @click="selectCollect(2)">已冻结</view>
			</view>
			<view class="staffListBox" v-if="staffList.length" :style="{ 'padding-bottom': paddingBottom + 'rpx' }">
				<!-- 状态正常 -->
				<view class="staffList" v-if="collectType == 1">
					<view class="item flex align-center" v-for="(item, index) in staffList" :key="index">
						<view class="imgBox">
							<image v-if="item.headimg" :src="item.headimg" mode=""></image>
							<image v-else :src="`${ImgUrl}defaultImg.png`" mode=""></image>
						</view>
						<view class="staffInfo" :class="{ activeRoot: item.qy_wechat_id || item.roles.length > 0 }">
							<view class="staffName flex align-center justify-between">
								{{ item.realname ? item.realname : item.nickname }}
								<view class="moreBtn">
									<view class="moreImg flex align-center flex-column justify-center" @click="openMore(item, index)">
										<image :src="`${ImgUrl}/static/superHK/team/more.png`" mode=""></image>
									</view>
									<view class="moreBox" v-if="item.openMore">
										<view class="item" @click="setRateBtn(item)">
											<!-- <image style="width: 29rpx;height: 35rpx;" :src="`${ImgUrl}/static/superHK/team/root.png`" mode=""></image> -->
											分佣比例
										</view>
										<view class="item" @click="toFreezeStaff(item,2)">
											<image style="width: 32rpx;height: 31rpx;" :src="`${ImgUrl}/static/superHK/team/freeze.png`" mode=""></image>
											冻结
										</view>
										<view class="item" style="border: 0;" @click="toDeleteStaff(item)">
											<image :src="`${ImgUrl}/static/superHK/team/delete.png`" mode=""></image>
											删除
										</view>
									</view>
								</view>
							</view>
							<scroll-view class="tagBox" scroll-x="true">
								<!-- <text class="active" v-if="item.qy_wechat_id">企业微信</text> -->
								<text v-for="(itemTag, indexTag) in item.roles" :key="indexTag">{{ itemTag }}</text>
							</scroll-view>
						</view>
					</view>
				</view>
				<!-- 已冻结 -->
				<view class="staffList" v-else>
					<view class="item flex align-center" v-for="(item, index) in staffList" :key="index">
						<view class="imgBox">
							<image v-if="item.headimg" :src="item.headimg" mode=""></image>
							<image v-else :src="`${ImgUrl}defaultImg.png`" mode=""></image>
						</view>
						<view class="staffInfo">
							<view class="staffName flex align-center justify-between">
								{{ item.realname ? item.realname : item.nickname }}
								<view class="cancelBtn" @click="toFreezeStaff(item,1)">取消冻结</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
			</view>
		</view>
		<view  v-if="!staffList.length" style="position: absolute;top: 55%;left: 50%;transform: translate(-50%, -50%);">
			<u-empty mode="list" text="暂无数据" icon-size="550" :src="`${ImgUrl}/static/superHK/notList.png`"></u-empty>
		</view>
		<view class="addStaffBtn"><view class="btn" @click="toQrCode">+ 添加员工</view></view>
		<!-- 添加员工弹出层 -->
		<u-popup v-model="show" mode="bottom" safe-area-inset-bottom border-radius="32" close-icon-pos="top-left" @close="closePopup" closeable>
			<view class="addStaffPop">
				<view class="tit">设置分佣比例</view>
				<view class="formBox">
					<view class="item">
						<text>标准订单分佣比例</text>
						<view class="input"><input type="number" v-model="normal" placeholder="请输入标准订单分佣比例" placeholder-class="placeClass" value="" /></view>
					</view>
					<view class="item">
						<text>非标准订单分佣比例</text>
						<view class="input">
							<input
								type="number"
								v-model="other"
								placeholder="请输入非标准订单分佣比例"
								placeholder-class="placeClass"
								value=""
							/>
						</view>
					</view>
				</view>
				<view class="AddSubmitBtn" @click="setRateSubmit">保存</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
// import { GetStaffList, GetFreezeStaff, AddStaff, FreezeStaff, DeleteStaff, UnFreezeStaff } from '@/api/api.js';
import { GetTeamList, FreezeStaff, DeleteStaff, SetRate } from '@/service/superHK.js'
export default {
	components: {},
	data() {
		return {
			status: 'loadmore',
			iconType: 'flower',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '实在没有了~'
			},
			ImgUrl: this.$static,
			scrollTop: 0,
			NavHeight: uni.getStorageSync('StatusBarHeight').height,
			userRole: null,
			page: 1,
			pageSize: 10,
			count: 0,
			collectType: 1,
			paddingBottom: 130,
			show: false,
			staffList: [],
			name: '',
			mobile: '',
			headImg:'',
			
			normal:'', //标准订单分佣比例
			other:'', //非标准订单分佣比例
			choose_ids:'', //精英管家userid
		};
	},
	onPageScroll(e) {
		let that = this;
		that.scrollTop = e.scrollTop;
	},
	computed: {},
	watch: {},
	created() {},
	onLoad(options) {
		const that = this;
		that.userRole = options.userRole;
		that.headImg = options.headImg
	},
	onReachBottom() {
		const that = this;
		that.GetStaffList('Reach')
	},
	onShow() {
		const that = this;
		that.GetStaffList();
	},
	methods: {
		// 分佣比例按钮
		setRateBtn(item){
			const that = this;
			that.choose_ids = item.user_id;
			that.normal = item.steward_user_order_rate_normal;
			that.other = item.steward_user_order_rate_other;
			that.show = true
		},
		// 分佣比例弹出保存
		async setRateSubmit(){
			const that = this;
			let r1 = /^([0-9]{1,2}|100)$/;//0-100的正整数
			console.log(that.normal)
			console.log(that.other)
			if(!r1.test(that.normal*1)){
			  uni.showToast({
			  	title:'分佣比例为0-100的正整数',
				icon:'none'
			  })
			  return;
			}
			let r2 = /^([0-9]{1,2}|100)$/;//0-100的正整数
			if(!r2.test(that.other*1)){
			  uni.showToast({
			  	title:'分佣比例为0-100的正整数',
				icon:'none'
			  })
			  return;
			}
			
			let params = {
				choose_ids:[that.choose_ids],
				normal:that.normal*1,
				other:that.other*1
			}
			let res = await SetRate(params)
			if(res.code == 1){
				uni.showToast({
					title:'保存成功！',
					icon:'success'
				})
				that.show = false;
				that.closePopup()
				that.GetStaffList()
			}else{
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
		},
		// 关闭弹出
		closePopup(){
			const that = this;
			that.choose_ids = '';
			that.normal = '';
			that.other = ''
		},
		
		// 切换员工列表状态
		selectCollect(type) {
			const that = this;
			that.collectType = type;
			that.page = 1;
			that.pageSize = 10;
			that.staffList = [];
			that.GetStaffList();
		},
		
		// 进入待审核列表
		toAudit(){
			uni.navigateTo({
				url:'/pages_superHK/pages/team/audit'
			})
		},
		
		// 进入我的二维码添加员工
		toQrCode(){
			const that = this;
			uni.navigateTo({
				url:'/pages_superHK/pages/team/teamQrCode?headImg='+that.headImg
			})
		},

		// 点击更多按钮
		openMore(item, index) {
			const that = this;
			if (index == that.staffList.length - 1 && item.openMore == false) {
				that.paddingBottom = 220;
			} else {
				that.paddingBottom = 130;
			}
			if (item.openMore) {
				that.staffList.map(item => (item.openMore = false));
				that.staffList[index].openMore = false;
			} else {
				that.staffList.map(item => (item.openMore = false));
				that.staffList[index].openMore = true;
			}
		},

		// 获取员工列表
		async GetStaffList(type) {
			const that = this;
			if(type == 'Reach'){
				that.page++
			}else{
				that.page = 1
			}
			let params = {
				page: that.page,
				pageSize: that.pageSize,
				keyword: '',
				status: that.collectType
			};
			let res = await GetTeamList(params);
			console.log(res);
			if (res.code == 1) {
				let List = res.data.list;
				List.map(item => {
					item.openMore = false;
				});
				if(type == 'Reach'){
					if(!List.length){
						that.status = 'nomore'
					}else{
						that.status = 'loading'
					}
					that.staffList = that.staffList.concat(List);
					that.count = res.data.count;
				}else{
					if(List.length<10){
						that.status = 'nomore'
					}
					that.staffList = List;
					that.count = res.data.count;
				}
			}
		},
		
		// 权限按钮
		toRoot(item){
			const that = this;
			that.$pages.jumpPage('/packages/Staff/root')
		},
		// 冻结按钮
		async toFreezeStaff(item,status){
			const that = this;
			uni.showModal({
				content:status==2?'确定要冻结该员工吗？':'确定要取消冻结该员工吗？',
				success: async res => {
					if(res.confirm){
						let params = {
							choose_id:item.user_id,
							status
						}
						let res = await FreezeStaff(params);
						if(res.code == 1){
							uni.showToast({
								title:status==2?'冻结成功':'已取消冻结',
								icon:'success'
							})
							that.GetStaffList()
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					}
				}
			})
		},
		// 删除按钮
		toDeleteStaff(item){
			const that = this;
			uni.showModal({
				content:'确定要删除该员工吗？',
				success: async res => {
					if(res.confirm){
						let params = {
							choose_id:item.user_id
						}
						let res = await DeleteStaff(params);
						if(res.code == 1){
							uni.showToast({
								title:'删除成功',
								icon:'success'
							})
							that.GetStaffList()
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					}
				}
			})
		},
		

	}
};
</script>
<style lang="less">
page {
	background: #fff;
}
.Details {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.BgHead {
	height: 380rpx;
	padding: 32rpx;
	z-index: 1;
	position: relative;
	overflow: hidden;
	.BgImg{
		width: 100%;
		height: 540rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.topBox {
		margin-top: 240rpx;
		width: 100%;
		font: 500 34rpx/48rpx PingFang SC;
		color: #fff;
		.left{
			image {
				width: 43rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}
		}
		.num{
			image {
				width: 31rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}
		}
	}
}
.Order {
	margin-top: -30rpx;
	background: #fff;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	overflow: hidden;
	position: relative;
	z-index: 2;
	padding: 24rpx 32rpx;
	.topNav {
		height: 46rpx;
		padding: 0 200rpx;
		margin-top: 31rpx;
		margin-bottom: 14rpx;
		.line {
			width: 2rpx;
			height: 28rpx;
			background-color: #cecece;
		}
		.item {
			font: bold 26rpx/37rpx PingFang SC;
			color: #757a81;
		}
		.active {
			font: 800 34rpx/47rpx PingFang SC;
			color: #08131a;
			position: relative;
			transition: all 0.3s;
		}
		.active:after {
			content: '';
			width: 80rpx;
			height: 16rpx;
			position: absolute;
			left: 0rpx;
			bottom: 3rpx;
			z-index: 0;
			background: linear-gradient(270deg, rgba(0, 158, 238, 0) 0%, rgba(0, 158, 238, 0.3) 100%);
		}
	}
	
	.staffListBox{
		padding-bottom: 130rpx;
	}

	.staffList {
		width: 100%;
		// padding-bottom: 130rpx;
		.item {
			.imgBox {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
				flex-shrink: 0;
				overflow: hidden;
				margin-right: 20rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.staffInfo {
				width: 100%;
				border-bottom: 2rpx solid #dfdfdf;
				padding: 64rpx 0;
				.staffName {
					font: 500 32rpx/45rpx PingFang SC;
					color: #08131a;
					.moreBtn {
						position: relative;
						width: 60rpx;
						height: 32rpx;
						.moreImg {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
							background-color: #f1f1f1;
							image {
								width: 25rpx;
								height: 6rpx;
							}
						}
						.moreBox {
							position: absolute;
							top: 0;
							right: 72rpx;
							width: 180rpx;
							z-index: 2;
							border-radius: 16rpx 0rpx 16rpx 16rpx;
							background-color: rgba(0, 0, 0, 0.6);
							.item {
								display: flex;
								border-bottom: 2rpx solid rgba(241, 241, 241, 0.14);
								align-items: center;
								justify-content: space-between;
								padding: 20rpx 43rpx 22rpx 34rpx;
								font: 500 26rpx/37rpx PingFang SC;
								color: #f1f1f1;
								image {
									width: 30rpx;
									height: 30rpx;
								}
							}
						}
					}
				}
				.tagBox {
					width: 538rpx;
					white-space: nowrap;
					margin-top: 12rpx;
					text {
						padding: 4rpx 16rpx;
						display: inline-block;
						border-radius: 20rpx;
						margin-right: 16rpx;
						background-color: rgba(113, 198, 240, 0.15);
						font: 500 22rpx/30rpx PingFang SC;
						color: #009eee;
					}
					.active {
						background-color: rgba(189, 229, 116, 0.15);
						color: #90c42f;
					}
				}

				// 取消冻结按钮
				.cancelBtn {
					width: 128rpx;
					height: 52rpx;
					background-color: #dfdfdf;
					border-radius: 26rpx;
					font: 500 22rpx/52rpx PingFang SC;
					color: #757a81;
					text-align: center;
				}
			}
			.activeRoot {
				padding: 47rpx 0 38rpx 0;
			}
		}
	}
}
.addStaffBtn {
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	left: 0;
	z-index: 3;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.btn {
		width: 580rpx;
		text-align: center;
		height: 92rpx;
		margin: 16rpx auto;
		border-radius: 55rpx;
		background: linear-gradient(129deg, #FEA62B 0%, #F29100 100%);
		font: 500 32rpx/92rpx PingFang SC;
		color: #fff;
	}
}

// 添加员工弹出层
.addStaffPop {
	padding: 44rpx;
	.tit {
		font: bold 34rpx/48rpx PingFang SC;
		color: #08131a;
		text-align: center;
		padding-bottom: 26rpx;
		border-bottom: 2rpx solid #dcdcdc;
	}
	.formBox {
		.item {
			font: 500 32rpx/45rpx PingFang SC;
			color: #08131a;
			display: flex;
			flex-direction: column;
			margin-top: 74rpx;
			margin-bottom: 56rpx;
			text {
				padding-left: 24rpx;
				margin-bottom: 12rpx;
			}
			.input {
				width: 100%;
				height: 102rpx;
				border-radius: 8rpx;
				background-color: #f1f1f1;
				padding: 30rpx 24rpx;
				.placeClass {
					font: 500 30rpx/42rpx PingFang SC;
					color: #aeb0b4;
				}
			}
		}
	}
	.AddSubmitBtn {
		width: 540rpx;
		height: 92rpx;
		background-color: #009eee;
		font: 400 32rpx/92rpx PingFang SC;
		color: #f5f5f5;
		text-align: center;
		border-radius: 55rpx;
		margin: 154rpx auto 0;
	}
}
.u-load-more-wrap{
	padding: 20rpx 0;
}
</style>
